<script setup lang="ts">

import HeaderArea from "@/components/search/HeaderArea.vue";
import {getIntegrationExchange} from "@/api/person/person";
import {ref} from "vue";
import {showConfirmDialog} from "vant";
import {copyText1, copyText2} from "@/api/funcTion";
const List=ref<any>('')
getIntegrationExchange().then(res=>{
    console.log(res.rows)
    List.value=res.rows
    console.log(List.value)
})
// 弹出兑换码
function popExchangecode(code){
    showConfirmDialog({
        title: '兑换码',
        message:
            code,
        confirmButtonText:'复制',
    })
        .then(() => {
            copyText2(code)
            // on
        })
        .catch(() => {
            // on cancel
        });
    // const beforeClose = (action) =>
    //     new Promise((resolve) => {
    //         setTimeout(() => {
    //             if (action === 'confirm') {
    //                copyText1(code)
    //                 resolve(true);
    //             } else {
    //                 // 拦截取消操作
    //                 resolve(true);
    //             }
    //         }, 100);
    //     })
    //
    // showConfirmDialog({
    //     title: '标题',
    //     message:
    //        code,
    //     confirmButtonText:'复制',
    //     beforeClose,
    // });
}


</script>

<template>
    <div>
        <HeaderArea>
            兑换记录
        </HeaderArea>
        <div v-for="(item,index) in List" :key="index" @click="popExchangecode(item.exchangeKey)">
        <div class="ExchangeCode" style="background-image: url('/src/views/PersonalCenter/images/兑换记录.png')">
            <img :src="'http://192.168.5.120:8199'+item.exchangeShopImage" height="80px" width="80px">
            <div class="information">
                <p>{{ item.exchangeShopName }}</p>
                <p>价值{{ item.exchangeShopValue }}元</p>
                <p>{{item.exchangeShopIntegral}}积分</p>
            </div>
            <div style="width: 20px;padding: 0 45px;color: white">
                兑换码
            </div>
            <!--        <img src="./images/兑换记录.png">-->
        </div>
        </div>
<!--        <div class="ExchangeCode" >-->
<!--            <img src="./images/4ff0aa8877ea203b016ff93a80c1c58e0e802af5130c1e-MK9Fcm_fw1200.png" height="80px">-->
<!--            <div class="information">-->
<!--                <p>ajshdjkashdasfh</p>-->
<!--                <p>价值39.9元</p>-->
<!--                <p>80积分</p>-->
<!--            </div>-->
<!--            <div style="opacity: 0;width: 20px;padding: 0 45px;color: white">-->
<!--                兑换码-->
<!--            </div>-->
<!--            &lt;!&ndash;        <img src="./images/兑换记录.png">&ndash;&gt;-->
<!--        </div>-->
        <p class="bottom">没有更多数据了~</p>
    </div>
</template>

<style scoped lang="less">
.ExchangeCode {
    padding: 20px;
    height: 124px;
    //width: 100%;
    background-image: url("images/yiduihuan@3x.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    .information {
        width: 200px;
        margin-left: 10px;
        p:first-child{
            font-weight: 700;
            font-size: 16px;
        }
        p:nth-child(2){
            color: gray;
            font-size: 12px;
        }
    }
}
.bottom {
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
}
</style>